<template>
  <div v-loading="listLoading" class="app-container">
    <div class="Container">
      <div class="baseMessage">
        <div class="topTitle">
          <span><strong>基本信息</strong></span>
        </div>
        <div class="content">
          <div class="flex">
            <i class="iconfont icon-xingming" />
            <span class="item1">姓名</span>
            <span class="item">{{ this.list.name }}</span>
          </div>
          <div class="flex">
            <i class="iconfont icon-xingbie" />
            <span class="item1">性别</span><span class="item">{{ this.list.sex }}</span>
          </div>
          <div class="flex">
            <i class="iconfont icon-dianhua" />
            <span class="item1">手机号</span><span class="item">{{ this.list.phone }}</span>
          </div>
          <div class="flex">
            <i class="iconfont icon-youxiang" />
            <span class="item1">邮箱</span><span class="item">{{ this.list.email }}</span>
          </div>
          <div class="flex">
            <i class="iconfont icon-zhiwei" />
            <span class="item1">职位</span>
            <span class="item">{{ this.list.position }}</span>
          </div>
        </div>
      </div>
      <div class="preference">
        <!-- 工作日偏好 -->
        <div class="topTitle">
          <span><strong>偏好信息</strong></span>
        </div>
        <div class="preContent">
          <div class="dayPre flex2">
            <span class="Itemtitle">工作日偏好&nbsp;</span>
            <el-select
              v-model="temp.dayvalue"
              multiple
              placeholder="工作日偏好"
              :disabled="disabled"
            >
              <el-option
                v-for="item in dayOption"
                :key="item.dayvalue"
                :label="item.label"
                :value="item.dayvalue"
              />
            </el-select>
          </div>
          <!-- 工作时间偏好 -->
          <div class="workTimePre flex2">
            <span class="Itemtitle">工作时间偏好&nbsp;</span>
            <el-form :model="temp" style="width: 100%; margin-left: 45px">
              <el-form-item
                v-for="(workingTimeArr, index) in temp.workingTimeArr"
                :key="index"
                :rules="{
                  required: true,
                  message: '数据不能为空',
                  trigger: 'blur',
                }"
                style="margin-bottom: 10px; list-style: none; width: 100%"
              >
                <el-time-select
                  v-model="workingTimeArr.startTime"
                  placeholder="起始时间"
                  style="margin-right: 10px; width: 30%"
                  :picker-options="{
                    start: '08:00',
                    step: '00:30',
                    end: '23:59',
                  }"
                  :disabled="disabled"
                />
                <el-time-select
                  v-model="workingTimeArr.endTime"
                  placeholder="结束时间"
                  style="margin-right: 10px; width: 30%"
                  :picker-options="{
                    start: '08:00',
                    step: '00:30',
                    end: '23:59',
                    minTime: workingTimeArr.startTime,
                  }"
                  :disabled="disabled"
                />
                <el-button
                  v-if="workingTimeArr.showDelet"
                  class="delete"
                  @click.prevent="removeSelect(workingTimeArr)"
                >删除</el-button>
              </el-form-item>
              <transition name="el-zoom-in-center">
                <el-form-item v-show="!disabled">
                  <el-button @click="addSelect">新增选项</el-button>
                </el-form-item>
              </transition>
            </el-form>
          </div>

          <!-- 班次时长偏好 -->
          <div class="timePre flex2">
            <span class="Itemtitle">班次时长偏好</span>
            <el-select
              v-model="temp.durationvalue"
              placeholder="班次时长偏好"
              :disabled="disabled"
            >
              <span
                style="font-size: 10px; margin-left: 60px"
              >工作时长偏好</span>
              <el-option
                v-for="item in durationOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <div class="modify">
              <el-button
                type="primary"
                icon="el-icon-edit"
                @click="handleUpdate"
              />
            </div>
            <div class="enter">
              <!-- 确认按钮 -->
              <transition name="el-zoom-in-center">
                <el-button
                  v-show="!disabled"
                  type="success"
                  icon="el-icon-check"
                  @click="Update"
                />
              </transition>
            </div>
            <div class="reset">
              <transition name="el-zoom-in-center">
                <el-button
                  v-show="!disabled"
                  type="info"
                  icon="el-icon-refresh"
                  @click="DhandleReset"
                />
              </transition>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="rightModify" @click="Modify">
      <span style="cursor: default">修改密码</span>
    </div>
    <div class="dataForm">
    <div
      :class="{
        opacity: first,
        showModify: filterd,
        disModify: !filterd && !first,
      }"
    >
      <el-form
        :model="modifyForm"
        status-icon
        :rules="rules"
        ref="modifyForm"
        label-width="100px"
        class="Password"
      >
        <el-form-item label="旧密码" prop="oldPassword" style="width: 100%">
          <el-input
            type="text"
            v-model="modifyForm.oldPassword"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword" style="width: 100%">
          <el-input
            type="text"
            v-model="modifyForm.newPassword"
            autocomplete="off"
            style="margin-top: 10px"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="enterPassword" style="width: 100%">
          <el-input
            type="text"
            v-model="modifyForm.enterPassword"
            autocomplete="off"
            style="margin-top: 10px"
          ></el-input>
        </el-form-item>
        <el-form-item class="function">
          <el-button type="primary" @click="submitForm()"> 提交</el-button>
          <el-button @click="resetForm('modifyForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div
      :class="{
        opacity: first,
        smallTriangleShow: filterd,
        smallTriangleDis: !filterd && !first,
      }"
    >
  </div>
    </div> -->
  </div>
</template>

<script>
import {
  updatePreferByEmp,
  getStaffinfo,
  getMockStaffinfo
} from '@/api/personal'
import { MydepCopy, debounce, duplicateRemoval } from '@/utils/MyTools'
export default {
  name: 'PersonnalManagement',
  data() {
    return {
      list: {},
      dayOption: [
        {
          dayvalue: '1',
          daylabel: '1'
        },
        {
          dayvalue: '2',
          daylabel: '2'
        },
        {
          dayvalue: '3',
          daylabel: '3'
        },
        {
          dayvalue: '4',
          daylabel: '4'
        },
        {
          dayvalue: '5',
          daylabel: '5'
        },
        {
          dayvalue: '6',
          daylabel: '6'
        },
        {
          dayvalue: '7',
          daylabel: '7'
        }
      ],
      disabled: true,
      temp: {
        id: undefined,
        timestamp: new Date(),
        dayvalue: '',
        startTime: '',
        endTime: '',
        durationtime: '',
        workingTimeArr: []
      },
      resetTemp: {},
      durationOption: [
        {
          value: '0',
          label: '无'
        },
        {
          value: '2',
          label: '2'
        },
        {
          value: '2.5',
          label: '2.5'
        },
        {
          value: '3',
          label: '3'
        },
        {
          value: '3.5',
          label: '3.5'
        },
        {
          value: '4',
          label: '4'
        }
      ],
      firstfirstRefresh: true,
      listLoading: true,
      tableKey: 0,
      rowStyle: { height: '80px' },
      startTime: '',
      endTime: '',
      TempTime: '',
      total: 0,
      listLoading: true,
      dialogFormVisible: false
    }
  },
  created() {
    this.getList()
    setTimeout(() => {
      this.init()
    }, 300)
  },
  methods: {
    addSelect() {
      if (this.temp.workingTimeArr.length == 4) {
        this.$notify({
          title: 'Error',
          message: '已达到最大的增加数量',
          type: 'error',
          duration: 2000
        })
      } else {
        this.temp.workingTimeArr.push({
          startTime: '',
          endTime: '',
          showDelet: true
        })
      }
    },
    init() {
      this.temp = Object.assign({}, this.list)
      this.resetTemp = MydepCopy(this.temp)
      // console.log("this.resetTemp",this.resetTemp);
    },
    removeSelect(item) {
      var index = this.temp.workingTimeArr.indexOf(item)
      if (index !== -1) {
        this.temp.workingTimeArr.splice(index, 1)
      }
    },
    Repaint(List) {
      this.listLoading = true
      this.list = List
      // console.log(this.list);
      // 初始化偏好数据
      this.list.dayvalue = ''
      this.list.durationvalue = ''
      this.list.workingTimeArr = []
      // console.log("this.list", this.list);
      for (var StPre of this.list.staffPreferenceList) {
        if (StPre.preferenceName == '工作日偏好') {
          this.list.dayvalue = StPre.preferenceValue.split(',').sort((a, b) => {
            return a - b
          })
        } else if (StPre.preferenceName == '工作时间偏好') {
          if (StPre.preferenceValue == '') {

          } else {
            const duration = StPre.preferenceValue.split(',')
            for (let i = 0; i < duration.length; i++) {
              const obj = { startTime: '', endTime: '' }
              obj.startTime = duration[i].split('-')[0]
              obj.endTime = duration[i].split('-')[1]
              this.list.workingTimeArr[i] = obj
              this.list.workingTimeArr[i].showDelet = false
            }
          }
        } else {
          this.list.durationvalue = StPre.preferenceValue
        }
      }
      // console.log(this.list)
      this.temp = Object.assign({}, this.list)
      setTimeout(() => {
        this.listLoading = false
      }, 1.5 * 1000)
    },
    getList() {
      getStaffinfo().then((res) => {
        // console.log("返回的数据",res.data.staffPreferenceList);
        if (res.returnValue == 1) {
          this.firstfirstRefresh = true
          this.Repaint(res.data)
        } else {
          this.$notify({
            titile: 'Error',
            message: res.msg,
            duration: 2000
          })
        }
      })
      setTimeout(() => {
        this.listLoading = false
      }, 1.5 * 1000)
    },
    handleUpdate() {
      this.disabled = !this.disabled
      if (this.disabled == false) {
        for (var item of this.temp.workingTimeArr) {
          item.showDelet = true
        }
      } else {
        this.temp = MydepCopy(this.resetTemp)
        for (var item of this.temp.workingTimeArr) {
          item.showDelet = false
        }
      }
    },
    Update: debounce(function() {
      this.$confirm('是否提交更改?', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      })
        .then(() => {
          const returnTemp = {}
          // 去除重复的工作时间偏好的添加
          this.temp.workingTimeArr = duplicateRemoval(this.temp.workingTimeArr)
          returnTemp.staffPreferenceList = this.UpdatastaffList(
            returnTemp,
            this.temp
          )
          // console.log("this.temp",this.temp);
          // console.log("更新后的个人信息", returnTemp.staffPreferenceList);
          updatePreferByEmp(returnTemp.staffPreferenceList).then((res) => {
            if (res.returnValue == 1) {
              // console.log(this.temp)
              this.$notify({
                title: 'Sucess',
                type: 'success',
                message: res.data
              })
              this.disabled = true
              for (var item of this.temp.workingTimeArr) {
                item.showDelet = false
              }
              for (var item of this.temp.workingTimeArr) {
                item.showDelet = false
                if (item.startTime == '' || item.endTime == '') {
                  this.removeSelect(item)
                }
              }
              // if(this.temp.workingTimeArr.length == 0||this.temp.dayvalue.length == 0 ||this.temp.durationvalue=="0"){
              //   this.getList();
              //   this.disabled  = true;
              // }
              this.getList()
              // this.disabled = true;
              // 更新重置对象
              this.resetTemp = MydepCopy(this.temp)
              // console.log("更新后的resetTemp", this.resetTemp);
            } else {
              this.$notify({
                title: 'Error',
                type: 'error',
                message: res.msg
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
    }),
    UpdatastaffList(returnTemp, tempData) {
      // 处理工作日偏好
      const staffPreferenceList = []
      const weekdayObjects = {}
      let i = 0
      const arr = tempData.staffPreferenceList
      for (i; i < arr.length; i++) {
        if (arr[i].preferenceName == '工作日偏好') {
          weekdayObjects.id = arr[i].id
          weekdayObjects.preferenceName = '工作日偏好'
          let NOC = 0
          let weekdayStr = ''
          for (var item of tempData.dayvalue) {
            if (NOC == 0) {
              if (item != undefined) weekdayStr += item
            } else {
              if (item != undefined) weekdayStr = weekdayStr + ',' + item
            }
            NOC++
          }
          weekdayObjects.preferenceValue = weekdayStr
          weekdayObjects.staffId = returnTemp.id
          break
        }
      }
      // 一开始没有这个偏好
      if (i == arr.length) {
        // 后来添加上的
        if (tempData.dayvalue.length > 0) {
          weekdayObjects.id = null
          weekdayObjects.preferenceName = '工作日偏好'
          let NOC = 0
          let weekdayStr = ''
          for (var item of tempData.dayvalue) {
            if (NOC == 0) {
              if (item != undefined) weekdayStr += item
            } else {
              if (item != undefined) weekdayStr = weekdayStr + ',' + item
            }
            NOC++
          }
          weekdayObjects.preferenceValue = weekdayStr
          weekdayObjects.staffId = returnTemp.id
        }
      }

      // 处理班次时长偏好
      const shiftDurationObject = {}
      let j = 0
      for (j; j < arr.length; j++) {
        if (arr[j].preferenceName == '班次时长偏好') {
          shiftDurationObject.id = arr[j].id
          shiftDurationObject.preferenceName = '班次时长偏好'
          shiftDurationObject.preferenceValue =
            tempData.durationvalue == 0 ? '' : tempData.durationvalue
          shiftDurationObject.staffId = returnTemp.id
          break
        }
      }
      // 一开始没有这个偏好
      if (j == arr.length) {
        // 后来添加上的
        if (tempData.durationvalue != '' && tempData.durationvalue != '0') {
          shiftDurationObject.id = null
          shiftDurationObject.preferenceName = '班次时长偏好'
          shiftDurationObject.preferenceValue =
            tempData.durationvalue == 0 ? '' : tempData.durationvalue
          shiftDurationObject.staffId = returnTemp.id
        }
      }

      // 处理工作时间偏好
      const workingTimeObject = {}
      let k = 0
      let workingTimeStr = ''
      for (k; k < arr.length; k++) {
        if (arr[k].preferenceName == '工作时间偏好') {
          workingTimeObject.id = arr[k].id
          workingTimeObject.preferenceName = '工作时间偏好'
          // NOC: numberOfCharacterCycles
          let NOC = 0
          for (var item of tempData.workingTimeArr) {
            if (item.startTime && item.endTime) {
              const tempStr = item.startTime + '-' + item.endTime
              if (NOC == 0) {
                if (item.startTime != undefined) workingTimeStr += tempStr
              } else {
                if (item.startTime != undefined) {
                  workingTimeStr = workingTimeStr + ',' + tempStr
                }
              }
              NOC++
            }
          }
          workingTimeObject.preferenceValue = workingTimeStr
          workingTimeObject.staffId = returnTemp.id
          break
        }
      }
      // 一开始没有这个偏好
      if (k == arr.length) {
        // 后来添加上的
        if (tempData.workingTimeArr.length > 0) {
          if (tempData.workingTimeArr[0].startTime != '') {
            workingTimeObject.id = null
            workingTimeObject.preferenceName = '工作时间偏好'
            // NOC: numberOfCharacterCycles
            let NOC = 0
            for (var item of tempData.workingTimeArr) {
              const tempStr = item.startTime + '-' + item.endTime
              if (NOC == 0) {
                if (item.startTime != undefined) workingTimeStr += tempStr
              } else {
                if (item.startTime != undefined) {
                  workingTimeStr = workingTimeStr + ',' + tempStr
                }
              }
              NOC++
            }
            workingTimeObject.preferenceValue = workingTimeStr
            workingTimeObject.staffId = returnTemp.id
          }
        }
      }

      if (workingTimeObject.preferenceName != undefined) {
        staffPreferenceList.unshift(workingTimeObject)
      }
      if (shiftDurationObject.preferenceName != undefined) {
        staffPreferenceList.unshift(shiftDurationObject)
      }
      if (weekdayObjects.preferenceName != undefined) {
        staffPreferenceList.unshift(weekdayObjects)
      }
      return staffPreferenceList
    },
    DhandleReset: debounce(function() {
      this.$confirm('是否重置信息?', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      })
        .then(() => {
          this.temp = MydepCopy(this.resetTemp)
          for (var item of this.temp.workingTimeArr) {
            item.showDelet = true
          }
          this.$message({
            type: 'success',
            message: '重置成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消重置'
          })
        })
    })
  }
}
</script>

<style scoped lang="less">
@import "//at.alicdn.com/t/c/font_3562328_6t3vorxwtwi.css";

.app-container {
  background-color: rgb(225, 222, 222);
  width: 100%;
}
.Container {
  // border: 1px solid black;
  width: 60%;
  height: auto;
  position: relative;
  left: calc(50%);
  transform: translateX(-50%);
  border-radius: 5px;
  padding: 10px;
  transition: all 1.5s;
  // border: 1px solid black;
  // display: flex;
  // flex-direction: column;
  // justify-content: space-between;
}
.fliter {
  filter: blur(10px);
}
.content {
  width: 100%;
  height: 110%;
  // border: 1px solid black;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.baseMessage {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-bottom: 50px;
  padding: 20px;
  height: 300px;
  border-radius: 5px;
  border: 1px solid rgb(202, 202, 208);
  background-color: white;
  // box-shadow: -5px 5px 10px black, 5px 5px 10px black;
}
.preference {
  // margin-top: -10%;
  width: 100%;
  height: auto;
  padding: 20px;
  border-radius: 5px;
  border: 1px solid rgb(202, 202, 208);
  background-color: white;
}
.preContent {
  width: 100%;
  height: 100%;
  margin-top: 5%;
  // border: 1px solid black;
}
.workTimePre {
  width: 100%;
}
.topTitle {
  font-size: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 20px;
  margin-bottom: 10px;
}
.iconfont {
  margin-right: 10px;
}

.flex {
  width: 40%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 1%;
  // border: 1px solid black;
}
.flex2 {
  display: flex;
  margin-bottom: 3%;
  align-items: flex-start;
}
.timePre {
  margin-bottom: 0px;
}
.item1 {
  display: inline-block;
  width: 20%;
  // border: 1px solid black;
  margin-right: 10%;
  font-size: 13px;
  color: #6c7d8f;
}
.item {
  font-size: 13px;
  color: #6c7d8f;
  display: inline-block;
  width: 20%;
  // border: 1px solid black;
}
.Itemtitle {
  display: block;
  width: 20%;
  margin-right: 70px;
  font-size: 13px;
  color: #6c7d8f;
  // border: 1px solid black;
}
.delete {
  margin-left: 20px;
}
.modify {
  margin-left: 10%;
}
.enter {
  margin-left: 2%;
}
.reset {
  margin-left: 2%;
}
</style>

